[Alexa] Account Linking を使用してスキルからFacebookに投稿してみました

音声アシスタント特集

#Account Linking

#AWS

#Amazon Alexa

SIN

2017.10.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

Amazon Alexa(以下、Alexa)のスキルには、Account Linkingという機能があり、他サービスの機能を利用することができます。

これについては、既に、ここDeveloprts.IOでもTwitterとの連携が紹介されています。
Amazon AlexaのAccount Linkingを使ってAmazon EchoからTwitterに書き込ませてみる

今回は、この機能を利用して、スキルからFacebookのタイムラインへ投稿してみましたので、紹介させて下さい。

最初に、動作しているようすです。サンプルのスキルは、毎回、同じメッセージを投稿するのですが、Facebookでは、同一メッセージの２重投稿はエラーとなるため、２回目の投稿は弾かれています。

2 Facebookアプリの作成

Facebookでアクセストークンを得るためには、Loginのサービスを設定する必要があります。

Loginのサービスの設定手順は、以下のとおりです。

アプリの作成
ログイン機能の追加
リダイレクトURLの設定

(1) アプリの作成

Facebook開発者ページで、新しいアプリを作成します。 001

後ほど、スキルのAccount Linkingの設定で必要となるので、アプリIDとapp secretを保存しておきます。

(2) ログイン機能の追加

作成したアプリで、「製品を追加」のメニューから「Facebookログイン」を追加します。

002

(3) リダイレクトURLの設定

「クライアントOAuth設定」の画面では、「ウェブOAuthログイン」にのみチェックし、「有効なOAuthリダイレクトURL」指定します。

015

この「有効なOAuthリダイレクトURL」は、Amazon開発者コンソール側で、スキルのAccount LinkingをYesにセットすると、スキルごとに生成されますので、それをコピーします。

012 013

２つのリダイレクトURLは、AccessToken取得時に、Alexaが自動的に選択するため、両方を設定しておく必要があります。

3 Account Linkingの設定

Account Linkingの設定は以下のとおりです。

Authorization URL 「https://www.facebook.com/v2.9/dialog/oauth」（バージョンごと固定です）
Client Id Facebookアプリの「アプリID」です。
Domain List 「www.facebook.com」
Scope 「publish_actions」 (今回は、「投稿」のアクセス権のみリクエストしています)
Authorization Grant Type 「Auth Code Grant」
Access Token URI 「https://graph.facebook.com/v2.9/oauth/access_token」（バージョンごと固定です）
Client Secret Facebookアプリの「app secret」です。
Client Authentication Scheme 「HTTP Basic (Recommended)」

014

4 ユーザによるアカウントリンク

Account LinkingがYesに設定されているスキルでは、Account Linking Requierdが表示されます。

016

SETTINGSからLink Accountを選択して認証を開始します。

005 006

認証が始まると、サービス側のウインドウが開き、ログインと利用の許可を求められます。（試験のために投稿の公開範囲は「自分のみ」にしました）

007

アカウントリンク（アクセストークンの受領）に成功すると下記のウインドウが表示されます。

008

また、表示はLinkedに変化します。

009

ここまでの作業で、Alexa側にトークンの取得が完了しており、事後、このトークンを添付してスキルを呼び出します。

期限を過ぎたトークンの更新は、Alexaが行うので、スキル開発者は、気にする必要がありません。

5 トークンの確認

表示がLinkedになっているスキルをTestから実行してみると、Server Request のcontext.System.user.accessTokeにトークンが入っていることを確認できます。

010

試しに、このトークンで投稿してみると。{"id":"xxxxxxxx"} と返って来ます。

$ curl -X POST https://graph.facebook.com/me/feed -F 'access_token=xxxxxxxx' -F 'message=hello world' 
{"id":"1486961791380564_1487008214709255"}

Facebookには、投稿されたメッセージが表示されています。

011

後は、このリクエストをAlexaで実装するだけです。

6 スキルの作成

下記は、Facebook SDKを使用して投稿しているスキルの一部です。 Alexaからのトークンがない場合は、アカウントリンクを誘導するカードを表示しています。

const handlers = {
  'WelcomeIntent': function () {
    let message = 'Welcome to Posting to Facebook skill. Are you sure you want to post a greeting to your timeline?';
    this.emit(':ask', message);
  },
  'YesIntent': function() {
    let accessToken = this.event.session.user.accessToken;
    if (accessToken == undefined) {
      this.emit(':tellWithLinkAccountCard','to start using this skill, please use the companion app to authenticate on Amazon');
      return;
    }
    FB.setAccessToken(accessToken);
    let body = 'Hello, how are you!';
    let self = this;
    FB.api('me/feed', 'post', { message: body }, function (res) {
      if (!res || res.error) {
        self.emit(':tell', 'ERROR ' + res.error);
        return;
      }
      self.emit(':tell', 'OK. Greeting submission has been completed.');
    });

  },
  'NoIntent': function() {
    this.emit(':tell', 'OK. Please call again.');
  },

  // ・・・省略・・・
}